<template>
 <!--待采购(暂时弃用)-->
  <div class="wait-list">
    <!--header-->
    <div>
      <div class="btns" style="padding:1em;margin-bottom:1em;background:#fff">
        <el-button v-if="table.selected.length>0" style="margin-right: 6px" type="primary" icon="el-icon-delete" size="small" @click="toMarkContract">生成采购合同</el-button>
        <el-button v-if="table.selected.length == 1" style="margin-right: 6px" type="warning" icon="el-icon-delete" size="small" @click="editSupplyPrice">修改供货价</el-button>
        <el-select v-model="searchForm.proIds" style="margin-right: 6px" multiple filterable clearable placeholder="请选择采购项目" value-key="name">
          <el-option v-for="item in projects" :key="item.id" :label="item.projectName" :value="item.id" />
        </el-select>
        <el-select v-model="searchForm.type" style="margin-right: 6px" filterable clearable placeholder="合同状态" value-key="name">
          <el-option key="1" label="有合同" value="1" />
          <el-option key="0" label="无合同" value="2" />
        </el-select>
        <el-input v-model="searchForm.supplier" type="text" size="small" placeholder="供应商" clearable/>
        <el-input v-model="searchForm.name" type="text" size="small" placeholder="设备名" clearable/>
        <el-button style="margin-right: 6px" type="primary" icon="el-icon-search" size="small" @click="toSearch">查询</el-button>
      </div>
    </div>
    <!--body-->
    <div>
      <a-card title="待采购明细">
        <a @click="toFlush()" slot="extra" href="#">刷新</a>
        <a-table
        class="list-table"
        size="small"
        :rowKey="record => record.id"
        :loading="table.loading"
        :data-source="table.data"
        :pagination="table.pagination"
        :row-selection="{ selectedRowKeys: table.selected, onChange: onSelectChange, selections: [{
          key: 'all-data',
          text: '全选',
          onSelect: () => {
            this.table.selected =  table.data.map(i=>{return i.id});
          },
        }]}"
        >
          <a-table-column :width="100" key="purchaseProName" title="项目" data-index="purchaseProName" ellipsis="true" align="center"/>
          <a-table-column :width="100" key="item" title="设备名" data-index="item" ellipsis="true" align="center"/>
          <a-table-column :width="100" key="number" title="数量" data-index="number" ellipsis="true" align="center"/>
          <a-table-column :width="100" key="purchaseSupply.supplier" title="供货商" data-index="purchaseSupply.supplier" ellipsis="true" align="center"/>
          <a-table-column :width="100" key="purchaseSupply.model" title="供货型号" data-index="purchaseSupply.model" ellipsis="true" align="center"/>
          <a-table-column :width="100" key="purchaseSupply.params" title="供货参数" data-index="purchaseSupply.params" ellipsis="true" align="center"/>
          <a-table-column :width="100" key="purchaseSupply.brand" title="供货品牌" data-index="purchaseSupply.brand" ellipsis="true" align="center"/>
          <a-table-column :width="100" key="purchaseSupply.price" title="供货价" data-index="purchaseSupply.price" ellipsis="true" align="center"/>
          <a-table-column :width="100" ellipsis="true" key="purchaseSupply.warranty" title="货期" data-index="purchaseSupply.warranty" align="center"/>
          <a-table-column :width="100" ellipsis="true" key="purchaseSupply.remark" title="备注" data-index="purchaseSupply.remark" align="center"/>
          <a-table-column :width="100" ellipsis="true" key="purchaseSupply.revisedPrice" title="被修正价" data-index="purchaseSupply.revisedPrice" align="center"/>
          <a-table-column :width="100" ellipsis="true" key="purchaseSupply.revisedRemark" title="修正原因" data-index="purchaseSupply.revisedRemark" align="center"/>
        </a-table>
      </a-card>
    </div>

    <!--dialog-->
    <el-dialog :title="title" :visible.sync="dialog.visible">
      <el-form ref="form" status-icon :model="form" :rules="rules">

      </el-form>
    </el-dialog>

    <!---->

  </div>
</template>
<script>
  import '@/styles/auto-style.css'
  import { getAction, postActionByJson, postActionByQueryString } from '@/api/manage'

  export default {

    data() {

      return {
        dialog: {
          visible: false,
          form: {}
        },
        table: {
          selected: [],
          loading: false,
          data: [],
          pagination: {
            showQuickJumper: true,
            showSizeChanger: true,
            pageSizeOptions: ['15', '30', '45'],
            current: 1,
            pageSize: 15,
            total: 0,
            onChange: (item) => {
              this.table.pagination.current = item
              this.toSearch()
            },
            onShowSizeChange: (current, pageSize) => {
              this.table.pagination.pageSize = pageSize
              this.toSearch()
            }, // 改变每页数量时更新显示
          }
        },
        searchForm: {},
        projects: [],
        url: {
          findAllLike: '/purchase/project/findAllLike',
          generatePurchaseContract: '/purchase/generatePurchaseContract/findItemsAndSupplyByProjectId'
        },
        windowWidth: document.documentElement.clientWidth, // 屏幕实时宽度
        windowHeight: document.documentElement.clientHeight, //实时屏幕高度
      }
    },
    mounted() {
      this.loadProjects()
      var that = this;
      // <!--把window.onresize事件挂在到mounted函数上-->
      window.onresize = () => {
        return (() => {
          window.fullWidth = document.documentElement.clientWidth;
          that.windowWidth = window.fullWidth; // 宽
        })()
      };
    },
    created() {

    },
    methods: {
      editSupplyPrice(){

      },
      toFlush(){

      },
      onSelectChange(ids, rows){
        const itemsId = []
        ids.map(item => {
          itemsId.push(item)
        })
        this.table.selected = itemsId
      },
      toMarkContract(){

      },
      toSearch(){
        this.table.loading = true
        this.searchForm.pageNum = this.table.pagination.current,
        this.searchForm.pageSize = this.table.pagination.pageSize
        postActionByQueryString(this.url.generatePurchaseContract, this.searchForm)
        .then(resp => {
          if (resp.data){
            this.table.data = resp.data.records
            this.table.pagination.current = parseInt(resp.data.current)
            this.table.pagination.pageSize = parseInt(resp.data.size)
            this.table.pagination.total = parseInt(resp.data.total)
          }
        }).catch(()=>{
          this.$message.error('查询失败')
        }).finally(()=>{
          this.table.loading = false
        })
      },
      loadProjects(){
        getAction(this.url.findAllLike)
        .then(response => {
          this.projects = response.data
        }).catch(()=>{
          this.$message.error('项目加载失败')
        })
      }
    }
  }
</script>

<style lang="scss" scoped>
  .wait-list{
    .list-table{
      height: 350px !important;
    }
  }
</style>
